<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	*{margin: 0px;list-style: none;}
	ul{position:relative;left: -30px;}
	div {border: 1px lightgray solid; width:200px; position:absolute; 
	display: none;}
	input{width: 200px;}
	.style {color:white;background-color: gray;}
</style>
	<script src="jquery-3.1.1.js"></script>
	<script>
		function load(){
		 	var urlStr ="GoogleSearchServlet";
            $.ajax({
                url:urlStr,
                type:"GET",
                dataType: "json",
                data:{"title":$("#word").val()},
                success:function(data){
                	$("#result ul").empty();
					for(var i = 0;i < data.length; i++ ){
						var movie = data[i];
						var line = "<li>"+movie.title +"</li>";
						$("#result ul").append(line);
					}
                }
            });
				
		}
		$(function(){
			$("ul li").hover(function(){$(this).toggleClass("style")}, function () {$(this).toggleClass("style")});
			var input = $("#word").offset();
			var top = input.top+$("#word").offsetHeight;
			$("#result").css({"top":top,"left":input.left});
			$("#word").keyup(function(){
				if($(this).val()=="") {
					$("#result").css({"display":"none"});
				}else{
					$("#result").css({"display":"block"});
					load();
				}
			});

			
			
		});
	</script>
</head>
<body>
	搜索：<input type="text" name="title" id="word"/>
	<div id="result">
	<ul>
	<li>sdaasdasdasd</li>
	</ul>
	</div>
</body>
</html>